<template>
  <view class="content">
    <view class="brightness-control">
      <text class="title">屏幕亮度调节</text>
      <slider 
        :value="brightness" 
        min="0" 
        max="100"
        show-value
        @change="changeBrightness"
        class="brightness-slider"
      />
    </view>
    
    <view class="eye-protect-mode">
      <text class="title">护眼模式</text>
      <switch 
        :checked="isEyeProtectMode" 
        @change="toggleEyeProtectMode"
        class="mode-switch"
      />
    </view>

    <view class="tips">
      <text class="tip-text">温馨提示:</text>
      <text class="tip-content">建议每使用45分钟,休息15分钟</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      brightness: 50,
      isEyeProtectMode: false
    }
  },
  onLoad() {
    // 获取当前系统亮度
    const that = this;
    uni.getScreenBrightness({
      success: function(res) {
        that.brightness = Math.floor(res.value * 100);
      }
    });
  },
  methods: {
    changeBrightness(e) {
      const value = e.detail.value;
      this.brightness = value;
      // 设置系统亮度
      uni.setScreenBrightness({
        value: value / 100,
        success: function() {
          console.log('亮度设置成功');
        }
      });
    },
    toggleEyeProtectMode(e) {
      this.isEyeProtectMode = e.detail.value;
      if (this.isEyeProtectMode) {
        // 开启护眼模式
        uni.setScreenBrightness({
          value: 0.4, // 设置为40%亮度
          success: function() {
            uni.showToast({
              title: '护眼模式已开启',
              icon: 'none'
            });
          }
        });
      } else {
        // 恢复之前的亮度
        uni.setScreenBrightness({
          value: this.brightness / 100,
          success: function() {
            uni.showToast({
              title: '护眼模式已关闭',
              icon: 'none'
            });
          }
        });
      }
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
}

.brightness-control, .eye-protect-mode {
  margin-bottom: 40rpx;
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: bold;
}

.brightness-slider {
  width: 100%;
}

.mode-switch {
  margin-top: 10rpx;
}

.tips {
  margin-top: 40rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
}

.tip-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.tip-content {
  font-size: 26rpx;
  color: #999;
}
</style>
